<template>
  <div
    v-if="visiable"
    class="plugin-option__inner"
  >
    <em-cell-group title="组件设置">
      <em-cell
        v-if="options.autoplay!==undefined"
        title="切换方式"
        center
        title-horizontal
        label-class="h4 font-weight-bold"
      >
        <el-switch
          v-model="options.autoplay"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="自动切换"
          inactive-text="手动切换"
        />
      </em-cell>
      <em-cell
        v-if="options.cols && columnOption.length>1"
        title="列数目："
        :label="options.cols"
        center
        title-horizontal
      >
        <el-radio-group
          v-model="options.cols"
          class="radio-icon"
        >
          <el-radio-button
            v-for="(column,index) in columnOption"
            :key="'c-'+index"
            :label="column.value"
          >
            <em-icon :name="column.icon" />
          </el-radio-button>
        </el-radio-group>
      </em-cell>
      <source-cell
        v-if="options.weblink && options.weblink.fence_id"
        v-model="options.weblink"
        :source-from="options.sourceFrom || []"
        :usage="plugin.name"
        title="数据来源"
      />
    </em-cell-group>
  </div>
</template>

<script>
import SourceCell from '@/components/SourceCell'
export default {
  name: 'SettingOption',
  components: {
    SourceCell
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  inject: ['getComponentPlugin'],
  data() {
    return {
      columns: [
        {
          value: 2,
          icon: 'em-icon-column-2'
        },
        {
          value: 3,
          icon: 'em-icon-column-3'
        },
        {
          value: 4,
          icon: 'em-icon-column-4'
        },
        {
          value: 5,
          icon: 'em-icon-column-4'
        }
      ]
    }
  },
  computed: {
    options() {
      return this.value
    },
    plugin() {
      return this.getComponentPlugin()
    },
    visiable() {
      if (!this.options) {
        return false
      } else {
        return (
          this.options.autoplay !== undefined || (this.options.cols && this.columnOption.length > 1)
        )
      }
    },
    visiableSource() {
      if (!this.options) {
        return false
      }
      return (
        this.options.autoplay !== undefined || (this.options.cols && this.columnOption.length > 1)
      )
    },
    maxCols() {
      return this.options.maxCols || 5
    },
    minCols() {
      return this.options.minCols || 2
    },
    columnOption() {
      var cols = []
      for (var i = this.minCols; i <= this.maxCols; i++) {
        cols.push({
          value: i,
          icon: 'em-icon-column-' + i
        })
      }
      return cols
    }
  },
  mounted() {}
}
</script>
